<template>
<div class="login-layout">
    <!-- 背景图片 -->
    <div class="bg-img"/>
     <!-- logo容器样式 -->
    <div class="container-logo">
         <!-- logo -->
        <logo-container target="login" />
    </div>
     <!-- 登录框 -->
    <div class="login-container">
        <div class="login-content-container">
            <div class="login-title-contaner">
                <div class="login-title-text">gcloud</div>
                <div class="login-title-line"></div>
            </div>
            <div class="login-form-container">
                <a-form   
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol">
                <a-form-item label="用户:" name="name">
                    <a-input v-model:value="formState.name" />
                </a-form-item>
                <a-form-item label="密码:" name="password">
                    <a-input type="password" v-model:value="formState.password" />
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 20, offset: 4}">
                    <a-button type="primary" @click="onSubmit">登录</a-button>
                    <a-button style="margin-left: 30px" @click="resetForm">撤销</a-button>
                </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</div>   
</template>
<script lang="ts" src="./index.ts">
// import logoContainer from '../../components/logo-container.vue';
</script>

<style lang="scss">
@import './index.scss'
</style>